<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>钱包盒子-大额信贷</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.css" />
		<link rel="stylesheet" href="../css/public.css" />
		<link rel="stylesheet" href="../css/mui.picker.css" />
		<link rel="stylesheet" href="../css/mui.poppicker.css" />
		<link rel="stylesheet" href="../css/post-form.css" />
	</head>

	<body class="bg-white">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">现金贷</h1>
		</header>
		<div class="mui-content mui-scroll-wrapper bg-white">
			<div class="mui-scroll">

				<div class="banner-box2">
					<img width="100%" src="../img/img-banner2.png" />
				</div>

				<div class="post-form">
					<h5 class="subtitle fc2-1">借多少（元）</h5>
					<div class="mb-input1 layout-box">
						<div class="input-box flex-item1">
							<input id="money" type="tel" placeholder="输入金额" onblur="numRange(this,30000,150000);">
						</div>
						<span class="text">￥30000 - ￥150000</span>
					</div>

					<h5 class="subtitle fc2-1">借多久（月）</h5>
					<input type="hidden" name="cycle" id="cycle" value="24" />
					<ul id="cycleList" class="mui-table-view-radio mb-radio date-radio date-radio1 clearfix">
						<li class="mui-table-view-cell mui-selected">
							<div class="btn">24</div>
						</li>
						<li class="mui-table-view-cell">
							<div class="btn">36</div>
						</li>
					</ul>

					<h5 class="subtitle fc2-1">每月还款（元）</h5>
					<div class="mb-input2">
						<div class="input-box">
							<input id="repayment" type="tel" placeholder="0.00">
						</div>
					</div>
					<div class="repayment layout-center r-arrow">
						<label class="fc2-1">借款用途</label>
						<div id="purpose" class="mb-select fc2-1 flex-item1">网上购物</div>
					</div>

					<button id="sendBtn" class="mui-btn mui-btn-block send-btn" type="button">立即申请</button>

					<div class="note2 fc2-1">借款本金将直接打入您的储蓄卡用于指定用途的生活消费</div>
				</div>

			</div>
		</div>
	</body>
	<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.picker.js"></script>
	<script src="../js/mui.poppicker.js"></script>
	<script type="text/javascript">
		var type = 2;
		
		mui.init();

		mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0005
		});
		
		document.getElementById("cycleList").addEventListener('selected',function(e){
			document.getElementById("cycle").value = e.detail.el.innerText;
		});
		
		var userPicker = new mui.PopPicker();
		userPicker.setData([{
			value: '1',
			text: '网上购物'
		}, {
			value: '2',
			text: '生活消费'
		}, {
			value: '3',
			text: '生活缴费'
		}]);
		var purposeButton = document.getElementById('purpose');
		purposeButton.addEventListener('tap', function(event) {
			userPicker.show(function(items) {
				purposeButton.innerText = items[0].text;
			});
		}, false);


		document.getElementById("sendBtn").addEventListener('tap', function() {
			var cycle = document.getElementById("cycle").value;
			var purpose = document.getElementById("purpose").innerText;
			var money = document.getElementById('money').value;
			if(!money) {
				common.alert("提示", "请输入借款金额!");
				return false;
			}
			var repayment = document.getElementById("repayment").value;
			if(!repayment) {
				common.alert("提示", "请输入还款金额!");
				return false;
			}
			mui.openWindow({
				url: "perfect_info.html",
				id: "perfect_info",
				extras: {
					money: money,
					cycle: cycle,
					purpose: purpose,
					repayment: repayment,
					type: type
				}
			})
		});
		
		function numRange(e,min,max) {
			var v = e.value || '';
			v = v.replace(/[^\d]/g,'');
			v = parseInt(v,10);
			var minVal = parseInt(min);
			var maxVal = parseInt(max);
			if(v < minVal){
				e.value = minVal;
			} else if(v > maxVal){
				e.value= maxVal;
			}
		}
	</script>

</html>